<template>
	<div style="width: 300px;">
		<!-- vue组件方式 直接向子组件传递属性 使用自定义的数据进行菜单绑定 -->
	<!-- 	<mMenu 
		:data="data1"  
		defaultActive="31" 
		background-color="#fff" 
		text-color='blue'
		name='a'
		index='b'
		icon='c'
		children='d'>
		</mMenu> -->
		<!-- tsx无线循环组件 -->
		<mMenuts 
		:data="data2"
		defaultActive="31"
		background-color="#fff" 
		text-color='blue'
		name='a'
		index='b'
		icon='c'
		children='d'></mMenuts>
	</div>
</template>

<script lang="ts" setup>
	// let data1 = [
	// 	{
	// 		name: '导航1',
	// 		index: "1",
	// 		icon: 'document'
	// 	}, {
	// 		name: '导航2',
	// 		index: "2",
	// 		icon: 'document'
	// 	}, {
	// 		name: '导航3',
	// 		index: "3",
	// 		icon: 'document',

	// 		children: [
	// 			{
	// 				name: '导航31',
	// 				index: "31",
	// 				icon: 'document',
	// 			},
	// 			{
	// 				name: '导航32',
	// 				index: "32",
	// 				icon: 'document',
	// 			}
	// 		]
	// 	},
	// ]
	let data1 = [
			{
				a: '导航1',
				b: "1",
				c: 'document'
			}, {
				a: '导航2',
				b: "2",
				c: 'document'
			}, {
				a: '导航3',
				b: "3",
				c: 'document',
	
				d: [
					{
						a: '导航31',
						b: "31",
						c: 'document',
					},
					{
						a: '导航32',
						b: "32",
						c: 'document',
					}
				]
			},
		]
	// let data2 = [
	// 	{
	// 		name: '导航1',
	// 		index: "1",
	// 		icon: 'Document'
	// 	}, {
	// 		name: '导航2',
	// 		index: "2",
	// 		icon: 'Document'
	// 	}, {
	// 		name: '导航3',
	// 		index: "3",
	// 		icon: 'Document',

	// 		children: [
	// 			{
	// 				name: '导航31',
	// 				index: "31",
	// 				icon: 'Document',
	// 			},
	// 			{
	// 				name: '导航32',
	// 				index: "32",
	// 				icon: 'Document',
	// 				children: [{
	// 					name: '导航321',
	// 					index: "321",
	// 					icon: 'Document',
	// 					children: [{
	// 						name: '导航3211',
	// 						index: "3211",
	// 						icon: 'Document',
	// 					},
	// 					]
	// 				}
	// 				]
	// 			}
	// 		]
	// 	},
	// ]
	// ]
	let data2 = [
			{
				a: '导航1',
				b: "1",
				c: 'Document'
			}, {
				a: '导航2',
				b: "2",
				c: 'Document'
			}, {
				a: '导航3',
				b: "3",
				c: 'Document',
	
				d: [
					{
						a: '导航31',
						b: "31",
						c: 'Document',
					},
					{
						a: '导航32',
						b: "32",
						c: 'Document',
						d: [{
							a: '导航321',
							b: "321",
							c: 'Document',
							d: [{
								a: '导航3211',
								b: "3211",
								c: 'Document',
							},
							]
						}
						]
					}
				]
			},
		]
		
</script>

<style>
</style>